<template>
<!-- bfc设置自适应两栏布局 -->
  <div class="">
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
    <div class="content">
      <div class="one"></div>
      <div class="two"></div>
<!--      <div class="clearfix"></div>-->
      <div class="three"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'bfc'
  }
</script>

<style scoped lang="scss">
  .left {
    width: 100px;
    height: 150px;
    float: left;
    background: rgb(139, 214, 78);
    text-align: center;
    line-height: 150px;
    font-size: 20px;
  }
  .right {
    overflow: hidden;
    height: 200px;
    background: rgb(170, 54, 236);
    text-align: center;
    line-height: 200px;
    font-size: 40px;
  }
  .content{
    width: 500px;
    border: solid 2px #2c3e50;
    /*zoom: 1;*/
    /*&::after{*/
    /*  content: " 111";*/
    /*  display: block;*/
    /*  clear: both;*/
    /*  font-size: 0;*/
    /*  height: 0;*/
    /*  visibility: hidden;*/
    /*}*/
    .one {
      margin: 10px;
      /*float: left;*/
      /*display: inline-block;*/
      width: 100px;
      height: 100px;
      background-color: #42b983;
    }
    .two {
      margin: 20px;
      /*float: left;*/
      /*display: inline-block;*/
      width: 100px;
      height: 100px;
      background-color: salmon;
    }
    .three {
      @extend .two;
    }
  }
  .clearfix{
    clear: both;
  }
</style>
